<template>
    <view class="body">

        <view class="reg mtop30">
            <view class="reg1">
                <view>
                    <!-- <p>手机号</p> -->
                    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
                    <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                        <u-form-item label="手机号" labelWidth="120px" prop="phoneNo" borderBottom ref="item1">
                            <u--input v-model="form.phoneNo" type="number" border="none" clearable
                                placeholder-class="myplaceholder" placeholder="请输入手机号码" maxlength="11"></u--input>
                        </u-form-item>
                    </u--form>
                </view>


                <view class="mtop20">
                    <!-- <p>身份证号</p> -->
                    <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                        <u-form-item label="身份证号" labelWidth="120px" prop="acctIdNo" borderBottom ref="item2">
                            <u--input v-model="form.acctIdNo" type="acctIdNo" border="none" clearable
                                placeholder="请输入身份证号码"></u--input>
                            <!--  <u-icon slot="right" @tap="getScanCode" name="scan" size="26"></u-icon> -->
                        </u-form-item>
                    </u--form>
                </view>

                <view class="mtop20">
                    <!-- <p>设置密码</p> -->
                    <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">

                        <u-form-item label="设置密码" labelWidth="120px" prop="pwd" borderBottom ref="item2"
                            style="display: flex;" v-if="isWechat=='mp-weixin'">
                            <u-input v-if="!showPass" border='none' v-model="form.password" type="password"
                                placeholder="请设置密码(8~16位数字和字母组合)">
                                <template slot="suffix">
                                    <view class="eye" @click="showPass = !showPass">
                                        <image class="pass-icon"
                                            :src="showPass?'/static/icon/p_022.png':'/static/icon/p_030.png'" mode="">
                                        </image>
                                    </view>

                                </template>
                            </u-input>
                            <u-input v-else v-model="form.password" border='none' type="text"
                                placeholder="请设置密码(8~16位数字和字母组合)">
                                <template slot="suffix">
                                    <view class="eye" @click="showPass = !showPass">
                                        <image class="pass-icon"
                                            :src="showPass?'/static/icon/p_022.png':'/static/icon/p_030.png'" mode="">
                                        </image>
                                    </view>
                                </template>
                            </u-input>
                        </u-form-item>


                        <u-form-item label="设置密码" labelWidth="120px" prop="password" borderBottom ref="item2" v-else>
                            <view style="width:88%;">
                                <u--input v-show="!showPass" type="password" class="uni-input" v-model="form.password"
                                    name="" placeholder="请设置密码(8~16位数字和字母组合)" border="none" clearable />
                                <u--input v-show="showPass" type="text" class="uni-input" v-model="form.password"
                                    name="" placeholder="请设置密码(8~16位数字和字母组合)" border="none" clearable />
                            </view>
                            <view style="width:12%;">
                                <image v-show="!showPass" src="/static/icon/p_030.png" mode="widthFix"
                                    style="width: 54rpx;vertical-align: middle;" @click="showPass = !showPass">
                                </image>
                                <image v-show="showPass" src="/static/icon/p_022.png" mode="widthFix"
                                    style="width: 54rpx;vertical-align: middle;" @click="showPass = !showPass">
                                </image>
                            </view>
                        </u-form-item>


                    </u--form>
                </view>

                <view class="mtop20">
                    <!-- <p>再次设置密码</p> -->
                    <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                        <u-form-item label="再次设置密码" labelWidth="120px" prop="pwd" borderBottom ref="item2"
                            style="display: flex;" v-if="isWechat=='mp-weixin'">
                            <u-input v-if="!showPass1" border='none' v-model="form.passwd" type="password"
                                placeholder="请设置密码(8~16位数字和字母组合)">
                                <template slot="suffix">
                                    <view class="eye" @click="showPass1 = !showPass1">
                                        <image class="pass-icon"
                                            :src="showPass1?'/static/icon/p_022.png':'/static/icon/p_030.png'" mode="">
                                        </image>
                                    </view>

                                </template>
                            </u-input>
                            <u-input v-else v-model="form.passwd" border='none' type="text"
                                placeholder="请设置密码(8~16位数字和字母组合)">
                                <template slot="suffix">
                                    <view class="eye" @click="showPass1 = !showPass1">
                                        <image class="pass-icon"
                                            :src="showPass1?'/static/icon/p_022.png':'/static/icon/p_030.png'" mode="">
                                        </image>
                                    </view>
                                </template>
                            </u-input>
                        </u-form-item>


                        <u-form-item label="再次设置密码" labelWidth="120px" prop="password" borderBottom ref="item2" v-else>
                            <view style="width:88%;">
                                <u--input v-show="!showPass1" type="password" class="uni-input" v-model="form.passwd"
                                    name="" placeholder="请设置密码(8~16位数字和字母组合)" border="none" clearable />
                                <u--input v-show="showPass1" type="text" class="uni-input" v-model="form.passwd" name=""
                                    placeholder="请设置密码(8~16位数字和字母组合)" border="none" clearable />
                            </view>
                            <view style="width:12%;">
                                <image v-show="!showPass1" src="/static/icon/p_030.png" mode="widthFix"
                                    style="width: 54rpx;vertical-align: middle;" @click="showPass1 = !showPass1">
                                </image>
                                <image v-show="showPass1" src="/static/icon/p_022.png" mode="widthFix"
                                    style="width: 54rpx;vertical-align: middle;" @click="showPass1 = !showPass1">
                                </image>
                            </view>
                        </u-form-item>

                    </u--form>
                </view>
            </view>





            <view class="mtop30">
                <u-button type="primary" color="#3182f4" shape="circle" :text="text" @click="registerBtn()"></u-button>
            </view>

        </view>


    </view>
</template>


<script>
    import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
    import util from '@/common/utils.js'
    import {
        resetPasswd
    } from '@/common/api.js'
    export default {
        components: {
            mpvueCityPicker
        },
        data() {
            return {
                isWechat: uni.getSystemInfoSync().uniPlatform,
                showPass: false, //是否显示密码
                showPass1: false, //是否显示密码
                themeColor: '#007AFF',
                form: {
                    phoneNo: '',
                    password: '',
                    passwd: '',
                    acctIdNo: '',

                },
                text: '提交',
                rules: {
                    'phoneNo': [{
                        type: 'number',
                        required: true,
                        message: '请填写电话号码',
                        trigger: ['blur', 'change']
                    }, {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        // 触发器可以同时用blur和change
                        trigger: ['change', 'blur'],
                    }],
                    'password': [{
                        type: 'string',
                        required: true,
                        message: '密码长度请限制8～16位数字和字母',
                        min: 8,
                        max: 16,
                        trigger: ['blur', 'change'],

                    }, ],
                    'passwd': {
                        type: 'string',
                        required: true,
                        message: '请再次填写相同密码',
                        trigger: ['blur', 'change']
                    },

                },

            };
        },
        onShow() {

        },
        methods: {
            inputPassword() {

            },
            toLogin() {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            },
            // 扫一扫
            getScanCode() {
                // #ifdef !H5
                uni.scanCode({
                    success: function(res) {
                        console.log('条码类型：' + res.scanType);
                        console.log('条码内容：' + res.result);
                    }
                });
                // #endif

                // #ifdef H5
                console.log('我是H5平台');
                this.initScanner()
                // #endif
            },
            registerBtn() {

                if (this.form.password !== this.form.passwd) {
                    this.$u.toast('请确认两个密码是否一致')
                    return;
                }

                if (!util.validIdCard(this.form.acctIdNo)) {
                    this.$u.toast('请输入正确的身份证号码')
                    return;
                }



                resetPasswd(this.form).then((res) => {
                    if (res.status === 200 || res.status === 0) {
                        this.$u.toast('成功')
                        setTimeout(function() {
                            uni.navigateTo({
                                url: '/pages/login/login'
                            })
                        }, 1000);
                    }

                })
            },



        },
        onReady() {
            //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
            this.$refs.uForm.setRules(this.rules)
        },
    };
</script>

<style lang="scss" scoped>
    .body {
        width: 92%;
        padding: 0 4%;


        .reg {
            .pass-icon {
                margin: 0 20px;
                width: 36rpx;
                height: 36rpx;
            }

            .regTip {
                span {
                    font-size: 24rpx;
                    color: #3182f4;
                    padding: 10rpx;
                }
            }
        }
    }
</style>